<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">

<style type="text/css">
body {
  width: 100%;
  height: 100%;
}

#plot-container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

#plot-container p, 
#plot-container img {
  opacity: 0;
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
  height: 100%;
}
</style>

<script type="text/javascript">
window.onload = function() {
  // get references to elements
  var plotContainer = document.getElementById("plot-container");
  var plotSmall = document.getElementById("plot-small");
  var plotFull = document.getElementById("plot-full");
  
  // allow css to drive image height
  plotSmall.removeAttribute('width');
  plotSmall.removeAttribute('height');
  
  // move the plot-full src to the div background
  var imgUrl = plotFull.getAttribute('src');
  var style = plotContainer.style;
  style.background = 'url("' + imgUrl  + '")';
  style.backgroundSize = 'contain';
  style.backgroundRepeat = 'no-repeat';
  style.backgroundPosition = 'center';
  
  // remove the img full
  plotFull.parentElement.removeChild(plotFull);
}
</script>

</head>

<body>

<div id="plot-container">
<img src="plot-small.png" id = "plot-small" />
<img src="plot-full.png" id = "plot-full" />
</div>

</body>

</html>
